<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useClusterStore } from '@/stores/cluster';

const route = useRoute();
const clusterStore = useClusterStore();
const projectCode = ref('');
const projectName = ref('');

onMounted(() => {
  projectCode.value = route.params.projectCode;
});

const menuItems = [
  {
    icon: 'workflow',
    text: '工作流定义',
    route: 'opsProcessDefine',
    color: '#1989fa'
  },
  {
    icon: 'play-circle',
    text: '工作流实例',
    route: 'opsProcessInstance',
    color: '#07c160'
  },
  {
    icon: 'cluster',
    text: '任务实例',
    route: 'opsTaskInstance',
    color: '#ff976a'
  }
];
</script>

<template>
  <div class="ops-container">
    <div class="ops-header">
      <h2 class="ops-title">运维管理</h2>
      <p class="ops-subtitle">当前项目: {{ projectName || projectCode }}</p>
    </div>

    <van-grid :column-num="3" class="ops-grid">
      <van-grid-item
        v-for="item in menuItems"
        :key="item.route"
        :icon="item.icon"
        :text="item.text"
        :to="{
          name: item.route,
          params: { projectCode }
        }"
      >
        <template #icon>
          <van-icon :name="item.icon" :style="{ color: item.color }" />
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<style scoped>
@import '@/styles/ops.css';
</style>
